{% extends 'base.html' %}

{% block jquerycript %}	
	$(":input").change
	(
		function() 
		{
			idValor = $(this).attr("name");
			if (idValor == "foto")
			{
				document.frmFoto.submit();
			}
			else
			{
				var validar = $(":input").validator({lang: 'es'});
				if (!validar.data("validator").checkValidity())
					$(this).focus();
				else
				{
			  		$.ajax
					(
						{
							type: "POST",
							url: "actualizar/",
							data:	{
										idUsuario: {{ user.id }},
										perfil: {{ request.session.grupoUsuarioid }},
										campo:$(this).attr("name"),
										valor:$(this).attr("value"),
										csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
									},
							success: function(datos) {},
							error: 	function(objeto, quepaso, otroobj) {alert("Pasó lo siguiente: "+objeto.statusText);},
							contentType: "application/x-www-form-urlencoded"
						}
					);
				}
			}
		}
	);
	
	$.tools.validator.localize
	(
		"es", 
		{
			'*'			: 'Ingrese un valor valido',
			':email'  	: 'Ingrese un E-mail valido',
			':url' 		: 'Ingrese una dirección url valida'
		}
	);
{% endblock %}

{% block ruta %}
	<li><a href="/">Inicio</a></li>
	<li>>></li>
	<li>Perfil</li>
{% endblock %}

{% block contenido %}
	<div id="content" class="with_sidebar">
		<h1>Perfil</h1>
		<table style="width: 100%;">
			<tr>
				<td style="width:140px; text-align:left;">
					<table id="formulario" class="formulario" style="width:127px;">
						<tr>
							<td style="padding: 3px;">
								<img src="{{ path }}{{ foto }}" alt="Mi Imagen de perfil"/>
							</td>
						</tr>		
					</table>
				</td>
				<td style="vertical-align:top;">
					<div id="csrf_token">{% csrf_token %}</div>
					<h2>Información básica</h2>
					<table style="width: 100%;">
						<tr>
							<td style="padding: 3px; width: 130px;"><strong>{{ tipoDocumento.nombre }}: </strong></td>				
						    <td style="padding: 3px;">{{ usuario.documento }} 
						    {% if usuario.lugar_expedicion %} 
						    	de {{usuario.lugar_expedicion}}
						    {% endif%}
						    </td>
						</tr>
						<tr>
							<td style="padding: 3px;"><strong>Nombre completo: </strong></td>
							<td style="padding: 3px;">{{ usuario.nombre1 }} {{ usuario.nombre2 }} {{ usuario.apellido1 }} {{ usuario.apellido2 }}</td>
						</tr>
						<tr>
							<td style="padding: 3px;"><strong>Género: </strong></td>
							<td style="padding: 3px;">{{genero.nombre}}</td>
						</tr>
						<tr>
							<td style="padding: 3px;"><strong>Fecha de nacimiento: </strong></td>
							<td style="padding: 3px;">{{usuario.fecha_nacimiento}}</td>
						</tr>
						<tr>
							<td style="padding: 3px;"><strong>Lugar de nacimiento: </strong></td>
							<td style="padding: 3px;">{{usuario.lugar_nacimiento}}</td>
						</tr>
						<tr>
							<td style="padding: 3px;"><strong>Imagen de perfil: </strong></td>
							<td style="padding: 0px;">
								<form name="frmFoto" action="foto/" method="post" enctype="multipart/form-data"> 
									<input type="file" name="foto" accept="image/gif,image/jpeg">
								</form>
							</td>
						</tr>
						
					
					</table>
				</td>				 
			</tr>
		</table>
		<h2>Información de residencia</h2>
		<table id="formulario" class="formulario" style="width: 100%;">
			<tr>
				<td style="padding: 3px; width: 140px;">Dirección: </td>				
			    <td style="padding: 3px;"><input type="text" name="direccion" id="direccion" size="50" value = "{{ usuario.direccion }}" autocomplete="off"/></td>
			</tr>	
			<tr>
				<td style="padding: 3px;">Lugar: </td>				
			    <td style="padding: 3px;"><input type="text" name="lugar" id="lugar" size="40" value = "{{ usuario.lugar_residencia }}" autocomplete="off"/></td>
			</tr>					
			<tr>
				<td style="padding: 3px;">Télefono fijo: </td>				
			    <td style="padding: 3px;"><input type="text" name="fijo" id="fijo" size="20" value = "{{ usuario.telefono }}" pattern="[0-9]{0,12}"autocomplete="off" /></td>
			</tr>	
			<tr>
				<td style="padding: 3px;">Télefono celular: </td>				
			    <td style="padding: 3px;"><input type="text" name="celular" id="celular" size="20" value = "{{ usuario.movil }}" pattern="[0-9]{0,12}" autocomplete="off"/></td>
			</tr>
			<tr>
				<td style="padding: 3px;">E-mail: </td>				
			    <td style="padding: 3px;"><input type="email" name="email" id="email" size="40" value = "{{ usuario.email }}" autocomplete="off"/></td>
			</tr>	
			<tr>
				<td style="padding: 3px;">Web: </td>				
			    <td style="padding: 3px;"><input type="url" name="web" id="web" size="50" value = "{{ usuario.web }}"/></td>
			</tr>		
		</table>
	</div>			
{% endblock %}